<template>
  <div class="item-detail flex column">
    <div class="item-title">悬浮组件</div>
    <div class="item-content">
      <Form :model="detailData" :label-width="80">
        <FormItem label="图标文案">
          <div class="input-wrapper">
            <Input style="width: 200px;"  v-model="detailData.json.iconText" placeholder="请输入主标题"></Input>
          </div>
        </FormItem>
        <FormItem label="弹窗标题">
          <div class="input-wrapper">
            <Input style="width: 200px;"  v-model="detailData.json.title" placeholder="请输入副标题"></Input>
          </div>
        </FormItem>
        <FormItem label="弹窗内容">
          <div class="input-wrapper">
            <Input style="width: 200px;"  v-model="detailData.json.text" placeholder="请输入副标题"></Input>
          </div>
        </FormItem>
        <FormItem label="联系电话">
          <div class="input-wrapper">
            <Input style="width: 200px;" v-model="detailData.json.phone" placeholder="请输入副标题"></Input>
          </div>
        </FormItem>
  	    <FormItem label="联系微信">
          <div class="input-wrapper">
            <Input style="width: 200px;" v-model="detailData.json.wechat" placeholder="请输入副标题"></Input>
          </div>
        </FormItem>
	    
      </Form>
    </div>

   
  </div>
</template>
<script>

export default {
  name: 'SuspensionDetail',
  props: {
    /**
     * @description 起始值，即动画开始前显示的数值
     */
    detailData: {
      
    },
  },
  data() {
    return {

  	}
  },
  components: {
  	
  }
}

</script>

<style scoped>
@import url("../baseModule.less");

.item-content {
	padding: 16px;
}

.content-edit {
	flex: 1;
	padding: 16px 16px 16px 24px;
	padding-top: 0;
}
.img-wrapper {
	width: 82px;
    height: 82px;
    padding: 5px;
    border: 1px solid #f2f2f2;
}
.content-item {
	padding: 16px 0;
    border-top: 1px solid #f2f2f2;

}
.form-wrapper {
    margin: 0 16px 0 12px;
    flex: 1;
}

/*上传图片控件*/
.input-file-wrapper {
	width: 100%;
	height: 100%;
	position: relative;
}
.input-file-wrapper img {
	width: 100%;
	height: 100%;
}
.input-file-wrapper input {
	position: absolute;
	left: 0;
	width: 100%;
	bottom: 0; top: 0;
	opacity: 0;
}
.icon-wrapper {
	min-width: 50px;
    width: 50px;
    height: 50px;
    background: #f2f2f2;
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
    display: flex;
    align-items: center;
	justify-content: center;
}

select {
    height: 34px;
    width: 80px;
    margin-right: 8px;
    padding-left: 6px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

</style>
